/*!
 * Emoji dialog plugin for Editor.md
 *
 * @file        emoji-dialog.js
 * @author      pandao
 * @version     1.2.0
 * @updateTime  2015-03-08
 * {@link       https://github.com/pandao/editor.md}
 * @license     MIT
 */

(function () {

  var factory = function (exports) {

    var $ = jQuery;
    var pluginName = "emoji-dialog";
    var emojiTabIndex = 0;
    var emojiData = [];
    var selecteds = [];

    var logoPrefix = "editormd-logo";
    var logos = [
      logoPrefix,
      logoPrefix + "-1x",
      logoPrefix + "-2x",
      logoPrefix + "-3x",
      logoPrefix + "-4x",
      logoPrefix + "-5x",
      logoPrefix + "-6x",
      logoPrefix + "-7x",
      logoPrefix + "-8x"
    ];

    var langs = {
      "zh-cn": {
        toolbar: {
          emoji: "Emoji 表情"
        },
        dialog: {
          emoji: {
            title: "Emoji 表情"
          }
        }
      },
      "zh-tw": {
        toolbar: {
          emoji: "Emoji 表情"
        },
        dialog: {
          emoji: {
            title: "Emoji 表情"
          }
        }
      },
      "en": {
        toolbar: {
          emoji: "Emoji"
        },
        dialog: {
          emoji: {
            title: "Emoji"
          }
        }
      }
    };

    exports.fn.emojiDialog = function () {
      var _this = this;
      var cm = this.cm;
      var settings = _this.settings;

      if (!settings.emoji) {
        alert("settings.emoji == false");
        return;
      }

      var path = settings.pluginPath + pluginName + "/";
      var editor = this.editor;
      var cursor = cm.getCursor();
      var selection = cm.getSelection();
      var classPrefix = this.classPrefix;

      $.extend(true, this.lang, langs[this.lang.name]);
      this.setToolbar();

      var lang = this.lang;
      var dialogName = classPrefix + pluginName, dialog;
      var dialogLang = lang.dialog.emoji;

      var dialogContent = [
        "<div class=\"" + classPrefix + "emoji-dialog-box\" style=\"width: 760px;height: 334px;margin-bottom: 8px;overflow: hidden;\">",
        "<div class=\"" + classPrefix + "tab\"></div>",
        "</div>",
      ].join("\n");

      cm.focus();

      if (editor.find("." + dialogName).length > 0) {
        dialog = editor.find("." + dialogName);

        selecteds = [];
        dialog.find("a").removeClass("selected");

        this.dialogShowMask(dialog);
        this.dialogLockScreen();
        dialog.show();
      } else {
        dialog = this.createDialog({
          name: dialogName,
          title: dialogLang.title,
          width: 800,
          height: 475,
          mask: settings.dialogShowMask,
          drag: settings.dialogDraggable,
          content: dialogContent,
          lockScreen: settings.dialogLockScreen,
          maskStyle: {
            opacity: settings.dialogMaskOpacity,
            backgroundColor: settings.dialogMaskBgColor
          },
          buttons: {
            enter: [lang.buttons.enter, function () {
              cm.replaceSelection(selecteds.join(" "));
              this.hide().lockScreen(false).hideMask();

              return false;
            }],
            cancel: [lang.buttons.cancel, function () {
              this.hide().lockScreen(false).hideMask();

              return false;
            }]
          }
        });
      }

      var category = ["Twemoji", "Font awesome"];
      var tab = dialog.find("." + classPrefix + "tab");

      if (tab.html() === "") {
        var head = "<ul class=\"" + classPrefix + "tab-head\">";

        for (var i = 0; i < category.length; i++) {
          var active = (i === 0) ? " class=\"active\"" : "";
          head += "<li" + active + "><a href=\"javascript:;\">" + category[i] + "</a></li>";
        }

        head += "</ul>";

        tab.append(head);

        var container = "<div class=\"" + classPrefix + "tab-container\">";

        for (var x = 0; x < 4; x++) {
          var display = (x === 0) ? "" : "display:none;";
          container += "<div class=\"" + classPrefix + "tab-box\" style=\"height: 260px;overflow: hidden;overflow-y: auto;" + display + "\"></div>";
        }

        container += "</div>";

        tab.append(container);
      }

      var tabBoxs = tab.find("." + classPrefix + "tab-box");
      var emojiCategories = ["twemoji", "font-awesome"];

      var drawTable = function () {
        var cname = emojiCategories[emojiTabIndex];
        console.log(1,cname)
        var $data = emojiData[cname];
        console.log(2,$data)
        var $tab = tabBoxs.eq(emojiTabIndex);

        if ($tab.html() !== "") {
          //console.log("break =>", cname);
          return;
        }

        var pagination = function (data, type) {
          // console.log(data)
          var rowNumber = (type === "editormd-logo") ? "5" : 20;
          var pageTotal = Math.ceil(data.length / rowNumber);
          var table = "<div class=\"" + classPrefix + "grid-table\">";

          for (var i = 0; i < pageTotal; i++) {
            var row = "<div class=\"" + classPrefix + "grid-table-row\">";

            for (var x = 0; x < rowNumber; x++) {
              var emoji = $.trim(data[(i * rowNumber) + x]);

              if (typeof emoji !== "undefined" && emoji !== "") {
                var img = "", icon = "";
                if (type === "twemoji") {
                  var twemojiSrc = exports.twemoji.path + emoji + exports.twemoji.ext;
                  img = "<img src=\"" + twemojiSrc + "\" width=\"24\" title=\"twemoji-" + emoji + "\" alt=\"twemoji-" + emoji + "\" class=\"emoji twemoji\" />";
                  row += "<a href=\"javascript:;\" value=\":tw-" + emoji + ":\" title=\":tw-" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + img + "</a>";
                } else if (type === "font-awesome") {
                  icon = "<i class=\"fa fa-" + emoji + " fa-emoji\" title=\"" + emoji + "\"></i>";
                  row += "<a href=\"javascript:;\" value=\":fa-" + emoji + ":\" title=\":fa-" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + icon + "</a>";
                }
              } else {
                row += "<a href=\"javascript:;\" value=\"\"></a>";
              }
            }

            row += "</div>";

            table += row;
          }

          table += "</div>";

          return table;
        };

        $tab.append(pagination($data, cname));

        $tab.find("." + classPrefix + "emoji-btn").bind(exports.mouseOrTouch("click", "touchend"), function () {
          $(this).toggleClass("selected");

          if ($(this).hasClass("selected")) {
            selecteds.push($(this).attr("value"));
          }
        });
      };

      if (emojiData.length < 1) {
        if (typeof dialog.loading === "function") {
          dialog.loading(true);
        }

        $.getJSON(path + "emoji.json?temp=" + Math.random(), function (json) {

          if (typeof dialog.loading === "function") {
            dialog.loading(false);
          }

          emojiData = json;
          emojiData[logoPrefix] = logos;
          drawTable();
        });
      } else {
        drawTable();
      }

      tab.find("li").bind(exports.mouseOrTouch("click", "touchend"), function () {
        var $this = $(this);
        emojiTabIndex = $this.index();

        $this.addClass("active").siblings().removeClass("active");
        tabBoxs.eq(emojiTabIndex).show().siblings().hide();
        drawTable();
      });
    };

  };

  // CommonJS/Node.js
  if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
    module.exports = factory;
  } else if (typeof define === "function")  // AMD/CMD/Sea.js
  {
    if (define.amd) { // for Require.js

      define(["editormd"], function (editormd) {
        factory(editormd);
      });

    } else { // for Sea.js
      define(function (require) {
        var editormd = require("./../../editormd");
        factory(editormd);
      });
    }
  } else {
    factory(window.editormd);
  }

})();
